<template>
  <div id="about" v-if="show">
    <main class="page landing-page">
      <section
        class="clean-block clean-hero"
        style="
          background: url('/images/tech/image4.jpg');
          color: rgba(9, 162, 255, 0.85);
        "
      >
        <div class="text">
          <h2>旅行，体验</h2>
          <p>旅行就像是读一本书，如果你没有出门，那么你只看了这本书的一面</p>
          <button class="btn btn-outline-light btn-lg" type="button">
            更 多
          </button>
        </div>
      </section>

      <section class="clean-block clean-info dark">
        <div class="container">
          <div class="block-heading">
            <h2 class="text-info">途游</h2>
            <p>旅游是一种可以充分放松自己的活动，有助于减压和享受生活。</p>
          </div>
          <div class="row align-items-center">
            <div class="col-md-6">
              <img
                class="img-thumbnail"
                src="../assets/img/scenery/image5.jpg"
              />
            </div>
            <div class="col-md-6">
              <h3>让我们开始旅游吧</h3>
              <div class="getting-started-info">
                <p>
                  旅游是一种可以充分放松自己的活动，有助于减压和享受生活。
                  旅游是一种可以充分放松自己的活动，有助于减压和享受生活。
                  旅游是一种可以充分放松自己的活动，有助于减压和享受生活。
                </p>
              </div>
              <button class="btn btn-outline-primary btn-lg" type="button">
                现 在
              </button>
            </div>
          </div>
        </div>
      </section>
    </main>

    <image-list></image-list>

    <footer class="page-footer dark">
      <div class="container">
        <div class="row">
          <div class="col-sm-3">
            <h5>了解一下</h5>
            <ul>
              <li><a href="#">首页</a></li>
              <li><a href="#">更多</a></li>
              <li><a href="#">更多</a></li>
            </ul>
          </div>
          <div class="col-sm-3">
            <h5>我们</h5>
            <ul>
              <li><a href="#">联系方式</a></li>
              <li><a href="#">有关我们</a></li>
              <li><a href="#">其他</a></li>
            </ul>
          </div>
          <div class="col-sm-3">
            <h5>更多</h5>
            <ul>
              <li><a href="#">更多</a></li>
              <li><a href="#">帮助</a></li>
              <li><a href="#">更多</a></li>
            </ul>
          </div>
          <div class="col-sm-3">
            <h5>更多</h5>
            <ul>
              <li><a href="#">获取帮助</a></li>
              <li><a href="#">湖北</a></li>
              <li><a href="#">更多</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="footer-copyright">
        <p>© 2023 Copyright Text</p>
      </div>
    </footer>
  </div>
</template>
    
    <script>
import ImageList from "../components/ImageList.vue";
export default {
  components: { ImageList },
  name: "Home",
  data() {
    return {
      show: false,
    };
  },
  mounted() {
    setTimeout(() => {
      this.show = true;
    }, 1000);
  },
};
</script>
    
<style>
.clean-hero {
  background: url("../assets/img/tech/image4.jpg") no-repeat;
}
</style>